

// state = data 

/*
  state 状态 react 组件数据交互的载体  状态用来修改的  实现数据响应式开发的 
  1. state 不能在组件外部定义  不能在组件外部 修改  只能在组件内部定义声明 只能在内部修改 
  2. state 用来被修改的  this.state 获取 state,     this.setState() 来修改 state 
  3. state 在组件内部的 getInitialState (15 已被废弃)  来初始化定义 state ,必须返回一个对象 
  4. state 修改 setState 这个方法会修改 state 会重新执行 组件内部的 render方法 , 会触发页面的
  二次渲染  虚拟DOM 会根据react 的 diff  算法  得到新的虚拟DOM 最后的批量的更新    

  setState 是同步还是异步  ????    => 异步  面试
  
*/ 

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import MyBtn from './MyBtn';



class MyState extends Component {

    constructor(){
        super()
        // // 优先级高 
        // this.state = {
        //     count:2000,
        //     msg:"Are you so sleep???"
        // }
    }

    // 优先级低 
    state = {
        count:1000,
        msg:"wh2217 - daydayup",
        flag:true ,
        word:"work hard one day",
        number:1 
    }

    changeCount=()=>{
        this.state.count++;
        console.log(this.state)
        this.setState({  // 更新视图 触发数据刷新  异步 
            // count:this.state.count 
            count:this.state.count++
            // count:++this.state.count 
        })
        console.log(this.state.count)
    }

    changeMsg=(msg)=>{
        this.setState({
            msg, 
        },()=>{
            console.log("数据已经更新了----" + this.state.msg)
        })
        console.log(this.state.msg)
    }
    onChange=(e)=>{
        this.setState({
            word:e.target.value 
        })
    }


    onClick=()=>{
        // react18只支持并发模式   版本18 会把多个 setState 汇成一个   批量更新 
        // setState 会触发组件视图的更新 render 
        // this.setState({number: this.state.number+1})
        // console.log(this.state.number);
        // this.setState({number: this.state.number+1})
        // console.log(this.state.number);
        
        // setTimeout 16版本 的 setState 不会合并批量处理 
        // setTimeout(()=>{
        //     this.setState({number: this.state.number+1})
        //     console.log(this.state.number);
        //     this.setState({number: this.state.number+1})
        //     console.log(this.state.number);
            
        // })

        // this.setState({number: ++this.state.number})  // 先加再赋值  +1 
        // console.log(this.state.number);
        // this.setState({number: ++this.state.number})  // +1 
        // console.log(this.state.number);
        
        // setTimeout(()=>{
        //     this.setState({number: ++this.state.number})  // +1 
        //     console.log(this.state.number);
        //     this.setState({number: ++this.state.number})  // +1
        //     console.log(this.state.number);
        // })

        // 2 3 2 2 
        this.setState({number: this.state.number++})  // 先赋值再加   // 1  
        console.log(this.state.number);     // 2
        this.setState({number: this.state.number++})  // 2 
        console.log(this.state.number);     // 3 
    
        
        // React 16 版本的 setTimeout 前置执行
        setTimeout(()=>{
            this.setState({number: this.state.number++})  // 2 
            console.log(this.state.number);    // 3 
            this.setState({number: this.state.number++})  // 3 
            console.log(this.state.number);  // 4 
        },0)


        // 16 vs 18 版本 

    }

    render() {
        console.log(this)
        const {count, msg , flag , word , number } = this.state 

        return (
            flag ?<div>
                <h2>React - State - 数据响应式 </h2>
                <h3>count = {count} </h3>
                <h3>msg = {msg} </h3>
                <h3>word= {word} </h3>
                <h3>number = {number} </h3>
                <hr/>
                <MyBtn  onClick={this.changeCount} text="count+1" ></MyBtn>
                <MyBtn  onClick={()=>this.changeMsg('学好React,哪哪都OK啊')} text="修改msg " ></MyBtn>
                <p>
                    <input type="text"   value={word} onChange={this.onChange} />
                </p> 
                <MyBtn  onClick={ ()=>this.setState({flag:!flag}) } text="flag取反" ></MyBtn>
                <MyBtn text="onClick" onClick={this.onClick}></MyBtn>
            </div> : null
        );
    }
}


MyState.propTypes = {

};


export default MyState;
